<template>
  <div>
    <!-- 判断 hasChildren 来使用不同的组件 -->
    <el-submenu v-if="hasChildren" :index="node.id">
      <template #title>{{ node.name }}</template>

      <!-- 渲染 node.chidlren 递归自身  -->
      <Item v-for="(item, index) in node.children" :key="index" :node="item" />
    </el-submenu>

    <el-menu-item v-else :index="node.id">
      <template #title>{{ node.name }}</template>
    </el-menu-item>
  </div>
</template>

<script>
export default {
  name: "Item",

  props: {
    /**
     * 结构: {
     *  id: '',
     *  name: '',
     *  children: [], // 可能
     * }
     */
    node: Object,
  },

  computed: {
    hasChildren() {
      return this.node.children && this.node.children.length;
    },
  },
};
</script>
